<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html;  charset="UTF-8">
	<!-- <meta name="Keywords" content="关键词,关键词"> -->
	<meta name="description" content="">

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		body {
			font-size: 12px;
			font-family: "微软雅黑";
			color: #666;
		}

		a {
			text-decoration: none;
		}

		ul li {
			list-style: none;
		}

		.tz_content {
			width: 100%;
			background: #282828;
		}

		/*t_left start*/
		.tz_content .t_left {
			width: 200px;
			height: 800px;
			background: #282828;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 2;
		}

		.tz_content .t_left .l_logo {
			width: 100%;
			height: 108px;
			border-bottom: 1px solid #000000;
			background: url("picture/logo1.png") no-repeat center;
		}

		.tz_content .t_left .l_nav {
			width: 100%;
			border-bottom: 1px solid #414141;
		}

		.tz_content .t_left .l_nav ul li {
			border-bottom: 1px solid #000000;
			line-height: 52px;
			border-top: 1px solid #414141;
		}

		.tz_content .t_left .l_nav ul li a {
			display: block;
			padding-left: 30px;
		}

		.tz_content .t_left .l_nav ul li a:hover {
			background: #28b779;
		}

		.tz_content .t_left .l_nav ul .active a {
			background: #28b779;
		}

		.tz_content .t_left .l_nav ul li a i {
			width: 16px;
			height: 16px;
			display: block;
			background: url("picture/ht_icon.png") no-repeat;
			float: left;
			margin-top: 20px;
		}

		.tz_content .t_left .l_nav ul li a .icon_1 {
			background-position: -233px -52px;
		}

		.tz_content .t_left .l_nav ul li a .icon_2 {
			background-position: -254px -52px;
		}

		.tz_content .t_left .l_nav ul li a .icon_3 {
			background-position: -211px -52px;
		}

		.tz_content .t_left .l_nav ul li a .icon_4 {
			background-position: -274px -52px;
		}

		.tz_content .t_left .l_nav ul li a .icon_5 {
			background-position: -295px -52px;
		}

		.tz_content .t_left .l_nav ul li a .icon_6 {
			background-position: -315px -52px;
			width: 19px;
			height: 6px;
			margin-top: 24px;
		}

		.tz_content .t_left .l_nav ul li a span {
			font-size: 14px;
			color: #fff;
			padding-left: 10px;
		}

		/*end t_left*/

		/*t_header start*/
		.tz_content .t_header {
			width: 100%;
			height: 56px;
			background: #2f3437;
			position: relative;
			z-index: 1;
		}

		/*h_nav start*/
		.tz_content .t_header .h_nav {
			height: 56px;
			margin-left: 200px;
			float: left;
		}

		.tz_content .t_header .h_nav ul li {
			float: left;
			width: 110px;
			height: 56px;
			border-left: 1px solid #414141;
			border-right: 1px solid #000;
		}

		.tz_content .t_header .h_nav ul li a {
			display: block;
			color: #838383;
			text-align: center;
			padding-top: 8px;
		}

		.tz_content .t_header .h_nav ul li a:hover {
			color: #fff;
		}

		.tz_content .t_header .h_nav ul li a i {
			display: block;
			width: 18px;
			height: 17px;
			background: url("picture/ht_icon.png") no-repeat;
			margin: 3px auto;
		}

		.tz_content .t_header .h_nav ul li .h_sel {
			color: #fff;
		}

		.tz_content .t_header .h_nav ul li a .h_icon1 {
			background-position: 0 -25px;
		}

		.tz_content .t_header .h_nav ul li a .h_icon2 {
			background-position: -24px 0;
		}

		.tz_content .t_header .h_nav ul li a:hover .h_icon2 {
			background-position: -24px -25px;
		}

		.tz_content .t_header .h_nav ul li a .h_icon3 {
			background-position: -48px 0;
		}

		.tz_content .t_header .h_nav ul li a:hover .h_icon3 {
			background-position: -48px -25px;
		}

		.tz_content .t_header .h_nav ul li a .h_icon4 {
			background-position: -68px 0;
		}

		.tz_content .t_header .h_nav ul li a:hover .h_icon4 {
			background-position: -68px -25px;
		}

		.tz_content .t_header .h_nav ul li a .h_icon5 {
			background-position: -91px 0;
		}

		.tz_content .t_header .h_nav ul li a:hover .h_icon5 {
			background-position: -91px -25px;
		}

		.tz_content .t_header .h_nav ul li a .h_icon6 {
			background-position: -113px 0;
		}

		.tz_content .t_header .h_nav ul li a:hover .h_icon6 {
			background-position: -113px -25px;
		}

		.tz_content .t_header .h_nav ul li a .h_icon7 {
			background-position: -133px 0;
		}

		.tz_content .t_header .h_nav ul li a:hover .h_icon7 {
			background-position: -133px -25px;
		}

		.tz_content .t_header .h_nav ul li a .h_icon8 {
			background-position: -152px 0;
		}

		.tz_content .t_header .h_nav ul li a:hover .h_icon8 {
			background-position: -152px -25px;
		}

		/*end h_nav*/

		/*h_info start*/
		.tz_content .t_header .h_info {
			height: 56px;
			position: absolute;
			top: 0;
			right: 10px;
		}

		.tz_content .t_header .h_info .h_user {
			line-height: 56px;
			color: #fff;
			float: left;
		}

		.tz_content .t_header .h_info .h_out {
			width: 65px;
			height: 30px;
			background: #28b779;
			margin: 13px 5px 0 10px;
			float: right;
		}

		.tz_content .t_header .h_info .h_out a {
			display: block;
			line-height: 30px;
			color: #fff;
			padding-left: 10px;
		}

		.tz_content .t_header .h_info .h_out a span {
			float: left;
		}

		.tz_content .t_header .h_info .h_out a i {
			width: 14px;
			height: 14px;
			display: block;
			background: url("picture/ht_icon.png") no-repeat 0 -51px;
			float: left;
			margin: 6px 8px;
		}

		/*end h_info*/

		/*end header*/

		.tz_content .t_right {
			height: 1500px;
			background: #f3f4f5;
			margin-left: 200px;
		}

		/*r_location start*/
		.tz_content .t_right .r_location {
			height: 51px;
			background: #e5e5e5;
			border-bottom: 1px solid #ccc;
			line-height: 51px;
		}

		.tz_content .t_right .r_location i {
			width: 14px;
			height: 18px;
			display: block;
			background: url("picture/ht_icon.png") no-repeat;
			background-position: -16px -51px;
			float: left;
			margin: 16px 20px 0 20px;
		}

		/*end r_location*/

		/*r_message start*/
		.tz_content .t_right .r_message .m_list {
			height: 99px;
			float: left;
			margin-left: 1%;
			margin-top: 20px;
		}

		.tz_content .t_right .r_message .m_1 {
			width: 22%;
			background: #27a9e3;
		}

		.tz_content .t_right .r_message .m_2 {
			width: 16%;
			background: #28b779;
		}

		.tz_content .t_right .r_message .m_3 {
			width: 17%;
			background: #ffb848;
		}

		.tz_content .t_right .r_message .m_4 {
			width: 21%;
			background: #cc6a6a;
		}

		.tz_content .t_right .r_message .m_5 {
			width: 18%;
			background: #2255a4;
		}

		.tz_content .t_right .r_message .m_6 {
			width: 17%;
			background: #da542e;
		}

		.tz_content .t_right .r_message .m_7 {
			width: 20%;
			background: #2255a4;
		}

		.tz_content .t_right .r_message .m_8 {
			width: 18%;
			background: #6297bc;
		}

		.tz_content .t_right .r_message .m_9 {
			width: 20%;
			background: #27a9e3;
		}

		.tz_content .t_right .r_message .m_10 {
			width: 19%;
			background: #28b779;
		}

		.tz_content .t_right .r_message .m_list .m_pic {
			width: 44px;
			height: 46px;
			background: url("picture/ht_icon.png") no-repeat;
			float: left;
			margin: 25px 10px 0 20px;
		}

		.tz_content .t_right .r_message .m_list:hover {
			background: #2f3437;
		}

		.tz_content .t_right .r_message .m_list .m_desc {
			color: #fff;
			margin-top: 25px;
		}

		.tz_content .t_right .r_message .m_list .m_desc span {
			font-size: 24px;
		}

		.tz_content .t_right .r_message .m_1 .m_pic {
			background-position: 0 -76px;
		}

		.tz_content .t_right .r_message .m_2 .m_pic {
			background-position: -46px -77px;
		}

		.tz_content .t_right .r_message .m_3 .m_pic {
			background-position: -96px -77px;
		}

		.tz_content .t_right .r_message .m_4 .m_pic {
			background-position: -146px -77px;
		}

		.tz_content .t_right .r_message .m_5 .m_pic {
			background-position: -190px -77px;
		}

		.tz_content .t_right .r_message .m_6 .m_pic {
			background-position: -239px -77px;
		}

		.tz_content .t_right .r_message .m_7 .m_pic {
			background-position: -288px -77px;
		}

		.tz_content .t_right .r_message .m_8 .m_pic {
			background-position: -342px -77px;
		}

		.tz_content .t_right .r_message .m_9 .m_pic {
			background-position: -395px -77px;
		}

		.tz_content .t_right .r_message .m_10 .m_pic {
			background-position: -449px -77px;
		}

		/*end r_message*/


		/*清除浮动*/
		.clear {
			clear: both;
		}

		/*r_table start*/
		.tz_content .t_right .r_table {
			border: 1px solid #ccc;
			margin: 0 1% 0 1%;
			background: #fff;
			margin-top: 20px;
			padding-bottom: 10px;
		}

		.tz_content .t_right .r_table .r_title {
			width: 100%;
			height: 40px;
			background: #eee;
			border-bottom: 1px solid #ccc;
		}

		.tz_content .t_right .r_table .r_title i {
			width: 16px;
			height: 14px;
			display: block;
			background: url("picture/ht_icon.png") no-repeat -386px -15px;
			float: left;
			margin: 12px;
		}

		.tz_content .t_right .r_table .r_title p {
			height: 40px;
			line-height: 40px;
			border-left: 1px solid #ccc;
			float: left;
			padding-left: 5px;
			color: #000;
		}

		.tz_content .t_right .r_table .r_label {
			width: 80%;
			height: 100px;
			float: left;
		}

		.tz_content .t_right .r_table .r_label ul li {
			list-style: none;
			float: left;
			background: #999;
			margin: 10px 10px 0 10px;
		}

		.tz_content .t_right .r_table .r_label ul li a {
			display: block;
			padding: 8px 20px;
			color: #fff;
		}

		.tz_content .t_right .r_table .r_label ul li a:hover {
			background: #28b779;
		}

		.tz_content .t_right .r_table .r_label ul .select a {
			background: #28b779;
		}

		.tz_content .t_right .r_table .r_label ul li a i {
			width: 15px;
			height: 14px;
			display: block;
			background: url("picture/ht_icon.png") no-repeat;
			float: left;
			margin-right: 10px;
		}

		.tz_content .t_right .r_table .r_label ul li a .l_icon1 {
			background-position: -33px -52px;
		}

		.tz_content .t_right .r_table .r_label ul li a .l_icon2 {
			background-position: -50px -52px;
		}

		.tz_content .t_right .r_table .r_label ul li a .l_icon3 {
			background-position: -67px -52px;
		}

		.tz_content .t_right .r_table .r_label ul li a .l_icon4 {
			background-position: -87px -52px;
		}

		.tz_content .t_right .r_table .r_label ul li a .l_icon5 {
			background-position: -105px -52px;
		}

		.tz_content .t_right .r_table .r_label ul li a .l_icon6 {
			background-position: -123px -52px
		}

		.tz_content .t_right .r_table .r_label ul li a .l_icon7 {
			background-position: -140px -52px;
		}

		.tz_content .t_right .r_table .r_label ul li a .l_icon8 {
			background-position: -155px -52px;
		}

		.tz_content .t_right .r_table .r_label ul li a .l_icon9 {
			background-position: -172px -52px;
		}

		.tz_content .t_right .r_table .r_label ul li a .l_icon10 {
			background-position: -191px -52px;
		}

		.tz_content .t_right .r_table .r_label ul li a .l_icon11 {
			background-position: -212px -52px;
		}

		.tz_content .t_right .r_table .r_search {
			width: 19%;
			height: 30px;
			float: left;
			padding-top: 10px;
		}

		.tz_content .t_right .r_table .r_search .r_text {
			width: 60%;
			height: 28px;
			line-height: 28px;
			border: 1px solid #ddd;
			float: right;
		}

		.tz_content .t_right .r_table .r_search .r_btn {
			width: 20%;
			height: 29px;
			background: #999;
			color: #fff;
			cursor: pointer;
			border: 0;
			float: right;
		}

		/*end r_table*/

		/*r_table_list start*/
		.tz_content .t_right .r_table .r_table_list {
			width: 100%;
		}

		.tz_content .t_right .r_table .r_table_list .t_tab {
			border-collapse: collapse;
			width: 98%;
			text-align: center;
			margin: 0 1%;
		}

		.tz_content .t_right .r_table .r_table_list tr th {
			line-height: 40px;
			background: #eee;
		}

		.tz_content .t_right .r_table .r_table_list tr td {
			border: 1px solid #ddd;
			line-height: 40px;
		}

		.tz_content .t_right .r_table .r_table_list .t_tab thead {
			border: 1px solid #ddd;
		}

		.tz_content .t_right .r_table .r_table_list .t_tab tbody tr:hover {
			background: #EAEAEA;
		}

		.tz_content .t_right .r_table .r_table_list .t_tab tbody tr:hover .t_action {
			display: block;
		}

		.tz_content .t_right .r_table .r_table_list .t_tab tbody tr td .t_action {
			width: 108px;
			height: 24px;
			margin: 0 auto;
			display: none;
		}

		.tz_content .t_right .r_table .r_table_list .t_tab tbody tr .t_td {
			width: 120px;
		}

		.tz_content .t_right .r_table .r_table_list .t_tab tbody tr td .t_action a {
			width: 24px;
			height: 24px;
			display: block;
			float: left;
			margin-right: 2px;
			background: url("picture/ht_icon.png") no-repeat;
		}

		.tz_content .t_right .r_table .r_table_list .t_tab tbody tr td .t_action a:hover {
			background-color: #2f3437;
		}

		.tz_content .t_right .r_table .r_table_list .t_tab tbody tr td .t_action .a_see {
			background-position: -359px -45px;
			background-color: #6297bc;
		}

		.tz_content .t_right .r_table .r_table_list .t_tab tbody tr td .t_action .a_edit {
			background-position: -379px -47px;
			background-color: #27a9e3;
		}

		.tz_content .t_right .r_table .r_table_list .t_tab tbody tr td .t_action .a_save {
			background-position: -398px -47px;
			background-color: #28b779;
		}

		.tz_content .t_right .r_table .r_table_list .t_tab tbody tr td .t_action .a_del {
			background-position: -417px -48px;
			background-color: #ff912f;
		}

		/*end r_table_list*/



		/*头部导航和消息提示小于1360的时候 用下边的样式*/
		@media screen and (max-width:1360px) {

			/*h_nav start*/
			.tz_content .t_header .h_nav {
				margin-left: 200px;
			}

			.tz_content .t_header .h_nav ul li {
				width: 80px;
			}

			/*end h_nav*/

			.tz_content .t_right .r_message .m_list .m_pic {
				display: none;
			}

			.tz_content .t_right .r_message .m_list .m_desc {
				text-align: center;
			}
		}

		/*头部导航和左侧导航小于1024的时候 用下边的样式*/
		@media screen and (max-width:1024px) {

			/*t_left start*/
			.tz_content .t_left {
				width: 50px;
			}

			.tz_content .t_left .l_logo {
				height: 54px;
				background: url("picture/logo1.png") no-repeat center;
			}

			.tz_content .t_left .l_nav ul li a {
				padding-left: 16px;
				height: 52px;
			}

			.tz_content .t_left .l_nav ul li a span {
				display: none;
			}

			/*end t_left*/

			/*h_nav start*/
			.tz_content .t_header .h_nav {
				margin-left: 50px;
			}

			.tz_content .t_header .h_nav ul li {
				width: 60px;
			}

			.tz_content .t_header .h_nav ul li a span {
				display: none;
			}

			.tz_content .t_header .h_nav ul li a i {
				margin: 14px auto;
			}

			/*end h_nav*/

			.tz_content .t_header .h_info .h_user {
				display: none;
			}

			.tz_content .t_right {
				margin-left: 0;
			}

			.tz_content .t_right .r_location {
				margin-left: 50px;
			}

			.tz_content .t_right .r_message {
				margin-left: 50px;
			}

			.tz_content .t_right .r_table {
				margin-left: 60px;
			}

		}


table{
				border-collapse: collapse;/*让靠在一起的单元格只显示一个边框，边框不进行叠加*/
			}
			
			table tr th{
				border: solid 1px #ccc;
				height: 70px;
				width: 400px;
				background-color: #eee;
			}
			
			table tr td{
				border: solid 2px #ccc;
				height: 30px;
				text-align: center;
			}
			
			table tr:hover
			{
				background-color: white;/*hover:鼠标移上去就会变成红色*/
			}
		.medium-text {
    font-size: 50px; /* 中字体 */
}



	</style>

<!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0-beta1/css/bootstrap.min.css" rel="stylesheet">
 引入Vue3 -->
  <!--  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.27/vue.global.prod.js"></script> -->
    <!-- 引入Axios -->
   <!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script> -->  
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.12/vue.global.min.js"></script>


</head>
<body>


	<div class="tz_content">

		<!--t_left start-->
		<div class="t_left">
			<div class="l_logo"></div>
			<div class="l_nav">
				<ul>
					<li class="active">
						<a href="select">
							<i class="icon_1"></i>
							<span onclick="turn0()">店铺</span>
						</a>
					</li>
					<li>
						<a href="order">
							<i class="icon_1"></i>
							<span onclick="turn1()">订单</span>
						</a>
					</li>

					<li>
						<a href="kefu">
							<i class="icon_2"></i>
							<span onclick="turn2()">客服</span>
						</a>
					</li>
					<li>
						<a href="songhuo">
							<i class="icon_3"></i>
							<span onclick="turn3()">送货</span>
						</a>
					</li>
					<li>
						<a href="wuliu">
							<i class="icon_4"></i>
							<span onclick="turn4()">物流</span>
						</a>
					</li>
					<li>
						<a href="caixi">
							<i class="icon_5"></i>
							<span onclick="turn5()">菜品</span>
						</a>
					</li>
					
				</ul>
			</div>
		</div>
		<!--t_left end-->

		<!--t_header start-->
		<div class="t_header">
			<!--h_nav start-->
			<div class="h_nav">
				<!-- <ul>
					<li>
						<a href="#" class="h_sel">
							<i class="h_icon1"></i>
							<span>首页</span>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="h_icon2"></i>
							<span>界面管理</span>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="h_icon3"></i>
							<span>栏目管理</span>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="h_icon4"></i>
							<span>内容管理</span>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="h_icon5"></i>
							<span>用户管理</span>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="h_icon6"></i>
							<span>论坛中心</span>
						</a>
					</li>
					<li>
						<a href="#">
							<i class="h_icon7"></i>
							<span>应用中心</span>
						</a>
					</li>

					<li>
						<a href="#">
							<i class="h_icon8"></i>
							<span>工具</span>
						</a>
					</li>
				</ul> -->
			</div>
			<!--end h_nav-->

			<!--h_info start-->
			<div class="h_info">
				<div class="h_user">当前用户：Arry , 身份：系统管理员</div>
				<div class="h_out">
					<a href="#">
						<span>退出</span>
						<i></i>
					</a>
				</div>
			</div>
			<!--end h_info-->

		</div>
		<!--end t_header-->


		<!--t_right start-->
		<div class="t_right">

			<!--r_location start-->
			<div class="r_location">
				<i></i>
				<p>您当前所在位置：首页 > 后台中心</p>
			</div>
			<!--end r_location-->

			<!--r_message start-->
			<div class="r_message" id= "app">
				<table border="0" cellspacing="0" cellpadding="0" class="medium-text ">
					<tr><th>店铺名</th><th>销售金额</th><th>开店天数</th><th>评分</th></tr>
					<!--<tr v-for="user in users" :key="user.id"> -->
						<!-- <tr >
					    <td>user.ID</td>
					    <td>{{ user.sale }}</td>
					    <td>{{ user.time }}</td>
					    <td>{{ user.mark }}</td> -->
					</tr>
				</table>
				<div class="clear"></div>
			</div>
			<!--end r_message-->

		</div>
		<!--end t_right-->

	</div>


</body>

</html>
<script>
	// var del = document.getElementsByClassName('a_del')
	// for (let i = 0; i < del.length; i++) {
	// 	del[i].onclick = function () {
	// 		del[i].parentNode.parentNode.parentNode.remove()
	// 	}
	// }
	// const { createApp } = Vue;
	// const app = createApp({
	//     data() {
	//         return {
	//             users: []
	//         };
	//     },
	//     async mount() {
	//         try {
	//             const response = await axios.get('http://127.0.0.1:8000/');
	//             this.users = response.data;
	// 			console.log(response.data);
	//         } catch (error) {
	//             //console.error("Error fetching users:", error);
	// 			console.log("收不到数据");
	//         }}
	// });
	
	// function turn0(){
	// 	this.$router.push('/kefu')
	// }
	//挂载Vue应用
	 // app.mount('#app');		
	const xhr = new XMLHttpRequest()
	var user
	xhr.open('GET','http://127.0.0.1:8000')
	xhr.send()
	xhr.onreadystatechange = function(){
		if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200){
			console.log(JSON.parse((xhr.responseText)))
			user = JSON.parse((xhr.responseText))
			getall(user)
			console.log(user)
		}
	}
	function getall(mess){
		mess.forEach(a => {
			let tr = document.createElement("tr")
			let td1 = document.createElement("td")
			td1.innerHTML = a.ID
			let td2 = document.createElement("td")
			td2.innerHTML = a.name
			let td3 = document.createElement("td")
			td3.innerHTML = a.phone
			let td4 = document.createElement("td")
			td4.innerHTML = a.pass
			tr.appendChild(td1)
			tr.appendChild(td2)
			tr.appendChild(td3)
			tr.appendChild(td4)
			document.querySelector("tbody").appendChild(tr)
			
			
		})
	}

	
</script>